<template>
    <view v-if="showStatus"
        class="w-full fixed top-0 left-0 bottom-0 right-0 z-10 bg-black bg-opacity-50 flex items-end z-11">
        <view class="w-full bg-white rounded-t-xl p4 pb-10 box-border animate__animated animate__slideInUp shadow">
            <view class="w-full flex items-start pb-3 mb-20px border border-0 border-b-1 border-gray-100 relative">
                <view class="w-1/4 width-25 h-80px relative overflow-hidden rounded-md">
                    <!-- <text class="absolute left-0 top-0">必选</text> -->
                    <view class="absolute left-0 top-0 z-1">
                        <!-- #ifdef H5 -->
                        <Vue3Lottie :animationData="newJSON" :height="50" :width="50" />
                        <!-- #endif -->
                    </view>
                    <image :lazy-load="true" class="w-full h-full"
                        src="https://p1.meituan.net/deal/e9996c39a0d58509d677b60a9eab131a53412.jpg@180w_164h_1e_1c"
                        mode="aspectFill"></image>
                </view>
                <view class="w-3/4 width-75 h-80px flex flex-wrap pl-2 pr-2 box-border content-between">
                    <view class="w-full">
                        <text class="text-md font-bold line-clamp-2">辣味鸡肉卷2次卡</text>
                        <text class="block text-xs text-gray-400">辣味鸡肉卷</text>
                    </view>
                    <view class="flex justify-between items-center w-full">
                        <view>
                            <text class="text-xs font-bold text-red-500">￥</text>
                            <text class="font-bold text-xl text-red-500 mr-1">13</text>
                            <text class="text-xs text-gray-500">/份</text>
                        </view>
                    </view>
                </view>
                <view @click="close"
                    class="absolute right-0 top-2px bg-gray-200 w-18px h-18px flex items-center justify-center rounded-2xl">
                    <text class="i-material-symbols-close bg-white"></text>
                </view>
            </view>
            <view class="w-full">
                <text class="block text-xs mt-2 mb-8px text-gray-500">规格</text>
                <view class="block w-full flex flex-wrap">
                    <text
                        class="block rounded-sm mr-12px mb-12px w-90px h-28px text-xs text-center leading-30px border-1 border-yellow-400 bg-yellow-50 text-yellow-400">1人份</text>
                    <text
                        class="block rounded-sm mr-12px mb-12px w-90px h-28px text-xs text-center leading-30px border border-gray-200 bg-white text-black">2人份</text>
                    <text
                        class="block rounded-sm mr-12px mb-12px w-90px h-28px text-xs text-center leading-30px border border-gray-200 bg-white text-black">3人份</text>
                </view>
            </view>
            <view class="w-full">
                <text class="block text-xs mt-2 mb-8px text-gray-500">口味</text>
                <view class="block w-full flex flex-wrap">
                    <text
                        class="block rounded-sm mr-12px mb-12px w-90px h-28px text-xs text-center leading-30px border border-gray-200 bg-white text-black">原味</text>
                    <text
                        class="block rounded-sm mr-12px mb-12px w-90px h-28px text-xs text-center leading-30px border border-gray-200 bg-white text-black">香辣</text>
                    <text
                        class="block rounded-sm mr-12px mb-12px w-90px h-28px text-xs text-center leading-30px border border-gray-200 bg-white text-black">椒盐</text>
                    <text
                        class="block rounded-sm mr-12px mb-12px w-90px h-28px text-xs text-center leading-30px border border-gray-200 bg-white text-black">甘梅</text>
                    <text
                        class="block rounded-sm mr-12px mb-12px w-90px h-28px text-xs text-center leading-30px border-1 border-yellow-400 bg-yellow-50 text-yellow-400">麻辣孜然</text>
                    <text
                        class="block rounded-sm mr-12px mb-12px w-90px h-28px text-xs text-center leading-30px border border-gray-200 bg-white text-black">糖醋麻辣</text>
                </view>
            </view>
            <view class="w-full">
                <text class="block text-xs mt-2 mb-8px text-gray-500">撒料</text>
                <view class="block w-full flex flex-wrap">
                    <text
                        class="block rounded-sm mr-12px mb-12px w-90px h-28px text-xs text-center leading-30px border border-gray-200 bg-white text-black">少撒</text>
                    <text
                        class="block rounded-sm mr-12px mb-12px w-90px h-28px text-xs text-center leading-30px border-1 border-yellow-400 bg-yellow-50 text-yellow-400">正常</text>
                    <text
                        class="block rounded-sm mr-12px mb-12px w-90px h-28px text-xs text-center leading-30px border border-gray-200 bg-white text-black">多放</text>
                </view>
            </view>
            <view
                class="w-full flex items-end justify-between border border-0 border-t-1 pt-5px border-gray-100 mt-10px">
                <view>
                    <view>
                        <text class=" text-red-500 text-xs font-bold">￥</text>
                        <text class=" text-red-500 font-bold text-xl">78</text>
                    </view>
                    <view class="flex items-end text-xs text-black">
                        <text class="text-gray-500 mr-5px">已选规格:</text>
                        <text>1人份、</text>
                        <text>麻辣孜然、</text>
                        <text>正常</text>
                    </view>
                </view>
                <view class="flex items-center">
                    <view class="w-25px h-25px flex items-center justify-center">
                        <text class="w-25px h-25px i-material-symbols-do-not-disturb-on-outline bg-gray-300"></text>
                    </view>
                    <text class="text-lg font-bold ml-15px mr-15px">3</text>
                    <view class="w-20px h-20px flex items-center justify-center bg-yellow-400 rounded-2xl">
                        <text class="i-material-symbols-add"></text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
// #ifdef H5
import { Vue3Lottie } from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'
import newJSON from '../static/json/new.json'
// #endif
const props = defineProps({
    showStatus: {
        type: Boolean,
        default: false
    }
})
watch(() => props.showStatus, (newValue) => {
    if (newValue == true) {
		// #ifndef APP-PLUS
		setTimeout(() => {
		    uni.hideTabBar()
		}, 100)
		// #endif
		// #ifdef APP-PLUS
		uni.hideTabBar()
		// #endif
    }
})
const emits = defineEmits(['close'])
const close = () => {
    emits('close', false)
}

</script>

<style scoped>
.animate__animated.animate__slideInUp {
    --animate-duration: 500ms;
}
</style>